const n = 6
const wrapper = document.querySelector('.bubbles')
wrapper.addEventListener('animationend', e => e.target.remove())
function createBubbles() {
    const vw = window.innerWidth
    for (let i = 0; i < n; i++) {
        const bubble = document.createElement('div')
        bubble.className = 'bubble'
        const s = Math.random() * 100 + 50; // 大小 
        const x = Math.random() * (vw - s); // left 
        const d = Math.random() * 2 + 1;// 1-2s
        bubble.style.setProperty('--s', `${s}px`)
        bubble.style.setProperty('--x', `${x}px`)
        bubble.style.setProperty('--d', `${d}s`)
        wrapper.appendChild(bubble)
    }
}

createBubbles()
setInterval(createBubbles, 500)